import React from 'react';
import { Button, Toast } from 'antd-mobile';
import * as img from '../assets/image';
import { useNavigate } from 'react-router-dom';
import Store from './store';
import { MainVersion, SubVersion, Customer } from '../config';
import {sendMessage} from "./utils"
import moment from 'moment';
export default function Person() {
    const { store } = Store.useContainer();
    const { userInfo, vip } = store;
    const navigate = useNavigate();

    const onGoBack = () => {
        navigate(-1);
    };

    const onBuy = () => {
        navigate('/product');
    };

    const onLogout = () => {
        sendMessage({func:"logout"}).then(() => {
            Toast.show('退出成功');
            navigate('/login', { replace: true });
        });
    };

    return (
        <>
            <div
                className="person_bg"
                style={{ backgroundImage: `url(${img.login_bg})` }}
            >
                <div className="person_header">
                    <img
                        className="person_back"
                        onClick={onGoBack}
                        src={img.icon_arrow_zuo_white}
                    />
                    <div className="person_title">菠萝VPN</div>
                </div>

                <img className="person_logo" src={img.icon_logo} />
                <div className="person_list">
                    <div className="person_list_item">
                        <div className="title">账号</div>
                        <div className="exta">{store.Email}</div>
                    </div>
                    <div className="person_list_item">
                        <div className="title">有效期至</div>
                        <div className="lingt">
                            {moment(Number(userInfo?.VipTime) * 1000).format(
                                'YYYY-MM-DD HH:mm:ss'
                            )}
                        </div>
                    </div>
                    <div className="person_list_item">
                        <div className="title">赠送时间</div>
                        <div className="lingt">
                            {userInfo?.BoundDay || 0} day
                        </div>
                    </div>
                    <div className="person_list_item">
                        <div className="title">推荐码</div>
                        <div className="exta">{userInfo?.InviteCode}</div>
                    </div>
                    {/* <div className="person_list_item">
                 <div className="title">订阅邮箱</div>
                 <div className="exta">boluovpn@Google.com</div>
            </div> */}
                    <div className="person_list_item">
                        <div className="title">VIP</div>
                        <div className="exta">
                            <span
                                className="lingt"
                                style={{
                                    textDecoration: 'underline',
                                    cursor: 'pointer',
                                }}
                                onClick={onBuy}
                            >
                                {vip ? '续费' : '开通'}
                            </span>
                        </div>
                    </div>
                    <div className="person_list_item">
                        <div className="title">客服</div>
                        <div className="exta">{Customer}</div>
                    </div>
                </div>
                <Button
                    className="person_btn"
                    color="warning"
                    onClick={onLogout}
                >
                    退出
                </Button>

                <div className="person_score"></div>

                <div className="person_version">
                    版本信息:{MainVersion}.{SubVersion}{' '}
                </div>
            </div>
        </>
    );
}
